<template>
  <div>
    <!-- 树形菜单 -->
    <el-scrollbar :height="sc_height">
      <el-aside width="90%" style="background-color: rgb(238, 241, 246); background: #fff;" class="treeBox">
        <el-menu :default-openeds="['1', '3']">
          <el-tree :data="tree_list" :default-expand-all="true" :highlight-current="true" ref="treeBox"
            node-key="areaCode" :default-expanded-keys="treeExpandData" :props="{
              checkStrictly: true,
              label: 'areaName',
              value: 'areaCode',
            }" @node-click="handleNodeClick"></el-tree>
        </el-menu>
      </el-aside>
    </el-scrollbar>
  </div>
</template>

<script>
import { ref, reactive, nextTick, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import api from "../api/api";
import { getDefault } from "../assets/js/getcampusList";
export default {
  name: "basetable",
  setup(props, ctx) {
    const router = useRouter();
    const route = useRoute();
    const tree_list = ref(ctx.attrs.tree_list);
    const defaultAreaCode = ref(ctx.attrs.areaCode);
    const treeExpandData = ref([]);
    const treeBox = ref("");
    const getareaTree = () => {
      // setTimeout(() => {
      treeExpandData.value = getDefault(tree_list.value);
      console.log(defaultAreaCode.value)
      if (defaultAreaCode.value) {
        nextTick(function () {
          treeBox.value.setCurrentKey(defaultAreaCode.value);
        });
      } else {
        // 默认高亮显示第一个子节点
        if (treeExpandData.value && treeExpandData.value[0]) {
          nextTick(function () {
            treeBox.value.setCurrentKey(treeExpandData.value[0]);
          });
        }
      }
      // },100);
      setTimeout(() => {
        getareaTreeList(tree_list.value);
      }, 5000);
    };
    getareaTree();
    const getareaTreeList = (list) => {
      return list;
    };
    const handleNodeClick = (res) => {
      ctx.emit("handle", res);
    };

    const sc_height = ref((document.documentElement.clientHeight - 50) + 'px') //默认高度
    onMounted(() => {
      window.onresize = function () { //检测window窗口改变大小
        sc_height.value = (window.innerHeight - 10) + 'px' // window的窗口高度肯定比el-scrollbar高，可以稍微减少点。减少多少自己修改50这个值
      }
    })
    return {
      treeBox,
      treeExpandData,
      tree_list, sc_height,
      getareaTreeList,
      handleNodeClick,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";

.content {
  background: #fff;
}

.el-menu {
  // position: absolute;
  height: 100%;
  // overflow-y: auto;
  width: 190px;
  z-index: 999;
}

.exportbtn {
  width: 80px;
  margin-bottom: 20px;
}

.exportbtn1 {
  margin-left: 70px;
}

.content_info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}

.info {
  /* width:150px; */
  text-align: center;
  padding: 2px 5px;
  margin-right: 30px;
  margin-top: 20px;
}

.select_info {
  /* width:150px; */
  text-align: center;
  padding: 2px 5px;
  margin-right: 30px;
  margin-top: 20px;
  border: 1px solid #999999;
  border-radius: 5px;
}

.el-overlay1 {
  background-color: none !important;
}

.el-menu {
  border: 0;
  width: 100%;
  padding-bottom: 80px;
  // border-right: none;
}

&:deep(.treeBox .el-tree-node__content) {
  height: 60px;
  line-height: 60px;
  font-size: 24px;
}
</style>
